<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #box div{
            width: 200px;
            height: 200px;
            background: lightsalmon;
            color: #FFFFFF;
            display: none;
            text-align: center;
            line-height: 200px;
            margin: 15px;
        }
        #box input{
            margin-left: 15px;
            border: none;
        }
        #box .active{
            background: lime;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var oTab = new fnTab("box");
        }

        function fnTab (id)
        {
            var oDiv = document.getElementById(id);
            this.aBtn = oDiv.getElementsByTagName('input');
            this.aDiv = oDiv.getElementsByTagName('div');
            var i = 0;
            var _this = this;
            for(i = 0; i < this.aBtn.length; i ++)
            {
                this.aBtn[i].index = i;
                this.aBtn[i].onclick = function () {
                    _this.tab(this);
                };
            }
        };

        fnTab.prototype.tab = function(oBtn){
            for(i = 0; i < this.aBtn.length; i ++)
            {
                this.aBtn[i].className = '';
                this.aDiv[i].style.display = 'none';
            }
            oBtn.className='active';
            this.aDiv[oBtn.index].style.display = 'block';
        }
    </script>
</head>
<body>
    <div id="box">
        <input type="button" value="按钮1" class="active" />
        <input type="button" value="按钮2" />
        <input type="button" value="按钮3" />
        <div style="display:block;">1111111111111111</div>
        <div>2222222222222222</div>
        <div>3333333333333333</div>
    </div>
</body>
</html>